<template>
  <div>
    <!-- 展示选择--开始-->
    <el-row type="flex" justify="center" align="middle" class="licc-goods-goods-info-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:1100px;">
        <el-col class="licc-center-img">
          <el-row>
            <!-- 展示图--开始 -->
            <el-col style="width: 390px; height: 500px">
              <img width="390" height="500" :src="imgIndexInfo" style="border: 1px solid #ccc;">
            </el-col>
            <el-col style="width: 14px; height: 500px"></el-col>
            <el-col style="width: 86px; height: 500px;">
              <el-col style="width: 86px; height: 500px; overflow:hidden;" class="licc-imgs">
                <div style="width: 102px; height: 500px; overflow-y:auto;overflow-x: hidden;">
                  <img width="83" height="109"
                       style="display: inline; float: left; "
                       v-for="(imgInfo, index) in imgUidList"
                       :key="index"
                       @click="imgClick(index,imgInfo,imgUidList)"
                       :src="imgInfo.url" :class="imgIndex==index?'imgChoose':'imgDefault'">
                </div>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
        <!-- 展示图--结束 -->
        <el-col style="width: 50px; height: 500px"></el-col>
        <!-- 信息选择--开始 -->
        <el-col class="licc-center-info">
          <el-row>
            <el-col class="licc-panel-top">
              <el-col>
                <h1>{{goodsInfo.goodsName}}</h1>
                <p>{{goodsInfo.goodsBrief}}</p>
              </el-col>
              <el-col style="background-color: #e9e9e9;">
                <el-col><span class="licc-panel-main-span">售价</span><span class="panel-maney">￥<i>{{goodsPrice}}</i></span></el-col>
                <el-col>
                  <span class="licc-panel-main-span">库存</span><span class="panel-number"><i>{{goodsNumber}}</i></span>
                  <span class="licc-panel-main-span-weight">重量&nbsp;&nbsp;{{goodsInfo.goodsWeight}}&nbsp;kg</span>
                </el-col>
              </el-col>
              <el-col style="width: 100%; height: 20px"></el-col>
            </el-col>
            <el-col class="licc-panel-main">
              <el-col
                v-for="(goodsAttr, index) in goodsAttrs"
                :key="index">
                <span class="licc-panel-main-span">{{goodsAttr.name}}</span>
                <el-tag
                  v-for="(attr, indexAttr) in goodsAttr.data"
                  :key="attr.attrSort"
                  @click="tagChoose(index,indexAttr,attr,goodsAttr)"
                  :type="attr.showImgFlag==0?'info':'danger'">{{attr.attrValue}}</el-tag>
                  <!--:type="goodsAttr.initAttrTag?((indexAttr==0)?'danger':(attr.showImgFlag==0?'info':'danger')):(attr.showImgFlag==0?'info':'danger')">{{attr.attrValue}}</el-tag>-->
              </el-col>
              <el-col>
                <span class="licc-panel-main-span">数量</span>
                <el-input-number size="mini" v-model="buyNum" controls-position="right" :min="0" :disabled="(goodsNumber===0)?true:false"></el-input-number>
              </el-col>
              <el-col style="margin-top: 20px">
                <span class="licc-panel-main-span"></span>
                <el-button v-if="goodsInfo.reviewStatus==10" type="danger" @click="addShoppingCart" style="width: 130px" :disabled="(goodsNumber===0||buyNum===0)?true:false"><svg-icon icon-class="liccGoods"/>&nbsp;加入购物车</el-button>
                <el-button v-if="goodsInfo.reviewStatus!=10" type="warning" style="width: 130px" disabled>商品已下线</el-button>
              </el-col>
            </el-col>
          </el-row>
        </el-col>
        <!-- 信息选择--开始 -->
      </el-row>
    </el-row>
    <!-- 展示选择--结束-->
    <!-- 商品详情--开始 -->
    <el-row type="flex" justify="center" align="middle" class="licc-goods-goods-info-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:1100px;">
        <el-col class="licc-details">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="商品信息" name="first">
              <el-row>
                <el-col :span="24" class="licc-goods-goods-info-parameter-list">
                  <p>商品货号：{{goodsInfo.goodsSn}}</p>
                  <p>商品详情：{{goodsInfo.goodsDesc}}</p>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <img width="700"
                       v-for="(imgInfo, index) in imgUidThumb"
                       :key="index"
                       :src="imgInfo.url">
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane :label="commentNum" name="second">
            <!--<el-tab-pane label="评论" name="second">-->
              <el-row class="licc-goods-info-comment-title" justify="start" align="top">
                <el-col :span="2">
                  <span @click="commentTypeClick(1)" :class="{'licc-goods-info-comment-title-span':(commentTypeIndex == 1)}">
                    全部评价({{commentAllNum}})
                  </span>
                </el-col>
                <el-col :span="2">
                  <span @click="commentTypeClick(2)" :class="{'licc-goods-info-comment-title-span':(commentTypeIndex == 2)}">客观</span>
                </el-col>
                <el-col :span="2">
                  <span @click="commentTypeClick(3)" :class="{'licc-goods-info-comment-title-span':(commentTypeIndex == 3)}">
                    好评({{commentGoodNum}})
                  </span>
                </el-col>
                <el-col :span="2">
                  <span @click="commentTypeClick(4)" :class="{'licc-goods-info-comment-title-span':(commentTypeIndex == 4)}">
                    中评({{commentMediumNum}})
                  </span>
                </el-col>
                <el-col :span="2">
                  <span @click="commentTypeClick(5)" :class="{'licc-goods-info-comment-title-span':(commentTypeIndex == 5)}">
                    差评({{commentBadNum}})
                  </span>
                </el-col>
              </el-row>
              <el-row v-if="comments.length == 0">
                <el-col style="height: 200px; line-height: 200px">
                  暂&nbsp;&nbsp;无&nbsp;&nbsp;评&nbsp;&nbsp;论
                </el-col>
              </el-row>
              <el-row v-if="comments.length != 0">
                <el-row class="licc-goods-info-comment-content" justify="start" align="top"
                  v-for="(comment, index) in comments" :key="comment.id">
                  <el-col class="licc-goods-info-comment-content-user" :span="2">
                    {{comment.memberName}}
                  </el-col>
                  <el-col :span="20">
                    <el-row>
                      <el-col class="licc-goods-info-comment-content-top" :span="24">
                        <el-rate v-model="comment.points" :colors="colors" disabled></el-rate>
                      </el-col>
                      <el-col class="licc-goods-info-comment-content-center" :span="24">
                        {{comment.content}}
                      </el-col>
                      <el-col class="licc-goods-info-comment-content-buttom" :span="24">
                        <span>{{comment.productsName}}</span>
                        <span style="padding-left: 20px">{{comment.createDate}}</span>
                        <span class="licc-goods-info-comment-content-buttom-svg" @click="addLikeNum(comment)" :class="{'licc-goods-info-comment-content-buttom-svg-red':(comment.delFlag === 1)}">
                          <svg-icon icon-class="liccPraise" style="font-size: 16px;"/> {{comment.likeNum}}
                        </span>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-row>
              <el-row>
                <el-col>
                  <div class="block">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-size="pagesize"
                      layout="prev, pager, next, jumper"
                      :total="goodsTotal">
                    </el-pagination>
                  </div>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-row>
    <!-- 商品详情结束开始 -->
  </div>
</template>

<script>
import goodsInfoApi from "@/api/goodsInfo"
import { getToken } from '@/utils/auth' // getToken from cookie
export default {
  name: 'GoodsInfo',
  data() {
    return {
      query: this.$route.query,
      /** 轮播展示图默认展示第一张 **/
      imgIndex:0,
      /** 轮播展示图 **/
      imgUidList:[],
      /** 轮播展示大图 **/
      imgIndexInfo: '',
      /** 商品基本信息表 **/
      goodsInfo:{},
      /** 商品初始价格 **/
      initGoodsPrice:0,
      /** 商品价格 **/
      goodsPrice:0,
      /** 商品初始库存 **/
      initGoodsNumber:0,
      /** 商品库存 **/
      goodsNumber:0,
      /** 属性值排列 **/
      goodsAttrs:[],
      /** 属性值组合属性 **/
      products:[],
      /** 选中的属性值组合 **/
      productChoose:{},
      /** 详情图 **/
      imgUidThumb:[],
      /** 详情页和评价选择 **/
      activeName:'first',
      /** 评论信息 **/
      comments:[],
      commentNum:'',
      commentAllNum:'0',
      commentGoodNum:'0',
      commentMediumNum:'0',
      commentBadNum:'0',
      /** 评论显示也编号 **/
      commentTypeIndex: 1,
      /**等级颜色**/
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      commentParams:{},
      currentPage: 1,
      pagesize:30,
      goodsTotal:0,
      /** 购买数量 **/
      buyNum: 1,
    }
  },
  created(){
    this.initPage();
  },
  methods: {
    initPage(){
      let params = {
        goodsId:this.query.goodsId,
        catId:this.query.catId
      }
      goodsInfoApi.initShopgoodsList(params).then(res => {
        /** 轮播图 **/
        this.imgUidList = res.data.imgUidList;
        /** 轮播图默认显示图 **/
        this.imgIndexInfo = res.data.imgUidList[0].url;
        /** 商品基本信息 **/
        this.goodsInfo = res.data.shopGoods;
        /** 商品初始价格 **/
        this.initGoodsPrice = res.data.shopGoods.shopPrice;
        /** 商品总库存 **/
        this.initGoodsNumber = res.data.shopGoods.goodsNumber;
        /** 商品属性值 **/
        this.goodsAttrs = res.data.goodsAttrs;
        /** 属性值的组合属性 **/
        this.products = res.data.products;
        /** 商品价格-商品库存 需要放在商品基本信息、属性值和属性值的组合后面 **/
        this.initGoodsPriceAndNumUtils();
        /** 详情图 **/
        this.imgUidThumb = res.data.imgUidThumb;
        this.commentNum = "评论（"+this.commentNumShowRule(this.goodsInfo.commentsNumber)+"）"
      }).catch(() => {

      });
      console.log("goodsID - " + this.query.goodsId);
      console.log("catID - " + this.query.catId);
    },
    imgClick(index,imgInfo,imgUidList){
      /** 中部轮播图点击事件 **/
      this.imgIndex = index;
      this.imgIndexInfo = imgInfo.url;
      console.log(index);
    },
    /** 详情展示或评论信息切换事件 **/
    handleClick(tab, event) {
      /** 详情切换按钮 **/
      if (tab.label === this.commentNum){
        /** 切换到评论时请求数据 **/
        this.currentPage = 1;
        this.commentParams = {
          goodsId: this.query.goodsId,
        }
        this.getComments();
      }
    },
    /** 获取评论详情 **/
    getComments(){
      goodsInfoApi.getCommentInfo(this.commentParams, this.currentPage, this.pagesize).then(res => {
        this.comments = res.data.iPage.records;
        this.goodsTotal = res.data.iPage.total;
        this.commentAllNum = this.commentNumShowRule(res.data.allNum);
        this.commentGoodNum = this.commentNumShowRule(res.data.goodNum);
        this.commentMediumNum = this.commentNumShowRule(res.data.mediumNum);
        this.commentBadNum = this.commentNumShowRule(res.data.badNum);
      }).catch(() => {
        this.$notify.error({title:'错误', message:'获取评论信息失败，请稍后再试！'});
      });
    },
    /** 评论类型切换事件 **/
    commentTypeClick(commentType){
      if (this.commentTypeIndex === commentType){
        /** 类型与原来类型相同 **/
        return false;
      }
      this.commentTypeIndex = commentType;
      if (commentType === 1){
        /** 最新评论 **/
        this.commentParams = {goodsId: this.query.goodsId,}
      } else if (commentType === 2){
        /** 客观评论 **/
        this.commentParams = {goodsId: this.query.goodsId, isLike:1}
      } else if (commentType === 3){
        /** 好评 **/
        this.commentParams = {goodsId: this.query.goodsId, points: 3}
      } else if (commentType === 4){
        /** 中评 **/
        this.commentParams = {goodsId: this.query.goodsId, points: 2}
      } else if (commentType === 5){
        /** 差评 **/
        this.commentParams = {goodsId: this.query.goodsId, points: 1}
      }  else{
        /** 默认最新评论 **/
        this.commentParams = {goodsId: this.query.goodsId,}
      }
      this.getComments();
    },
    /** 点赞 **/
    addLikeNum(comment){
      if (comment.delFlag == 0){
        /** 没点过赞 **/
        comment.delFlag = 1;
        comment.likeNum = comment.likeNum + 1;
      } else {
        /** 点过赞了 **/
        comment.delFlag = 0;
        comment.likeNum = comment.likeNum - 1;
      }
      goodsInfoApi.updateCommentLikeNum({id:comment.id, likeNum: comment.likeNum}).then(res => {
        /** 点赞成功 **/
      }).catch(() => {
        this.$notify.error({title:'失败', message:((comment.delFlag==1)?'点':'取消')+'赞失败，请稍后再试'});
      })
    },
    /** 分页--开始 **/
    handleSizeChange(val) {
      this.pagesize = val;
      this.initPage();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initPage();
    },
    /** 分页--结束 **/
    tagChoose(index,indexAttr,attr,attrs){
      /** 属性点击事件 **/
      attrs.data.forEach((value, i) => {
        /** 遍历该类属性，并初始化没选 **/
        value.showImgFlag = 0;
      });
      /** 显示该属性被选择 **/
      attr.showImgFlag = 1;
      this.initGoodsPriceAndNumUtils();
    },
    initGoodsPriceAndNumUtils(){
      /** 存储被选中属性的ID **/
      let attrIds = [];
      this.goodsAttrs.forEach(value => {
        /** 遍历所有属性 **/
        value.data.forEach(attrChoose => {
          /** 遍历该类属性 **/
          if (attrChoose.showImgFlag === 1){
            /** 保存选中属性的ID **/
            attrIds.push(attrChoose.id);
          }
        });
      });
      /** 选中属性ID重新排序，便于比较 **/
      attrIds = attrIds.sort();
      this.products.some(value => {
        /** 遍历所有属性的组合 拿到组合属性ID**/
        let attrIdsOfProducts = value.goodsAttr.split(":");
        /** 组合属性ID重排序 便于比较 **/
        attrIdsOfProducts = attrIdsOfProducts.sort();
        if (attrIdsOfProducts.toString() === attrIds.toString()){
          /** 如果组合ID相同，重新计算价格 **/
          this.goodsPrice = this.initGoodsPrice + value.productPrice;
          this.goodsNumber = value.productNumber;
          /** 购买商品数量 **/
          this.buyNum = this.goodsNumber === 0?0:1;
          /** 选中的组合 **/
          this.productChoose = value;
          return true;
        }
      });
    },
    addShoppingCart(){
      let token = getToken();
      let hasToken = token != 'undefined' && token != undefined && token !=null && token != '';
      if(!hasToken){
        /** 未登陆 **/
        this.$notify.warning({title: '提示', message: '您还未登录，请登录再操作！'});
        return false;
      }
      /** 加入购物车 **/
      if(this.buyNum < 1){
        /** 购买数量大于0 不能购买  **/
        this.$notify({title: '提示', message: '请调整数量', type: 'warning'});
        return false;
      }
      if(this.buyNum > this.goodsNumber){
        /** 购买数量大于该尺寸库存 不能购买  **/
        this.$notify({title: '提示', message: '购买数量大于库存了，请调整数量', type: 'warning'});
        return false;
      }
      let params = {
        /** 商品基本信息ID **/
        goodsId: this.goodsInfo.id,
        /** 商品选择属性ID **/
        products_id: this.productChoose.id,
        /** 商品数量 **/
        cart_num:this.buyNum
      }
      goodsInfoApi.addShoppingCartInfo(params).then(res => {
        /** 加入购物车成功 **/
        this.$notify({title: '操作成功', message: '成功添加购物车', type: 'success'});
      }).catch(() => {
        /** 加入购物车失败 **/
        this.$notify.error({title: '操作失败', message: '添加购物车失败'});
      })
      console.log(params);
    },
    commentNumShowRule(num){
      if (num<10){
        return ''+num;
      } else if (num < 100){
        return (parseInt(num/10)*10)+'+';
      } else{
        return (parseInt(num/100)*100)+'+';
      }
    }
  }
}
</script>
<style>
  .licc-goods-goods-info-top-row{
    width: 100%;
    margin-top: 20px;
  }
  .licc-center-img{
    padding: 0px;
    width: 490px;
    height: 500px;
  }
  .licc-center-info{
    padding: 0px;
    width: 560px;
    height: 500px;
  }
  .licc-imgs{
    /*margin-bottom: 0px;*/
  }
  .imgChoose{
    border: 1px solid #e53e41;
  }
  .imgDefault{
    border: 1px solid #ccc;
  }
  .licc-panel-top{
    text-align: left;
    border-bottom: 1px solid #ccc;
  }
  .licc-panel-top h1{
    font-size: 20px;
    font-weight: 400;
    color: #333;
    margin-bottom: 14px;
  }
  .licc-panel-top p{
    font-size: 14px;
    color: #999;
    margin-bottom: 14px;
  }
  .licc-panel-main{
    margin-top: 20px;
    text-align: left;
  }
  .licc-panel-main-span{
    padding-left: 20px;
    float: left;
    width: 65px;
    height: 35px;
    font-size: 14px;
    line-height: 35px;
    font-weight: 400;
  }
  .licc-panel-main-span-weight{
    float: right;
    padding-right: 20px;
    font-size: 10px;
    line-height: 35px;
    color: #999;
  }
  .panel-maney{
    color: #f85453;
  }
  .panel-maney i{
    display: inline-block;
    vertical-align: -3px;
    height: 35px;
    line-height: 35px;
    font-size: 28px;
  }
  .panel-number i{
    height: 35px;
    line-height: 35px;
  }
  .el-tag--info{
    display: inline-block;
    margin: 0 10px 20px 0;
    background-color: rgba(255,255,255,0);
    cursor: pointer;
  }
  .el-tag--danger{
    display: inline-block;
    margin: 0 10px 20px 0;
    background-color: rgba(255,255,255,0);
  }
  .licc-panel-bottom{

  }
  .licc-details{
    width: 100%;
    margin-top: 20px;
    border-top: 1px solid #ccc;
  }
  i{
    font-style: normal;
  }
  .licc-goods-info-comment-title{
    text-align: left;
    color: #666;
    font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .licc-goods-info-comment-title span{
    cursor: pointer;
  }
  .licc-goods-info-comment-title span:hover{
    color: #F56C6C;
  }
  .licc-goods-info-comment-title-span{
    color: #F56C6C;
  }
  .licc-goods-info-comment-content{
    margin-top: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  .licc-goods-info-comment-content-user{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #666;
  }
  .licc-goods-info-comment-content-top{

  }
  .licc-goods-info-comment-content-center{
    font-size: 14px;
    padding: 10px 0;
    line-height: 180%;
    color: #333;
  }
  .licc-goods-info-comment-content-buttom{
    color: #999;
    font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .licc-goods-info-comment-content-buttom-svg{
    padding-left: 100px;
    cursor: pointer;
    line-height: 16px;
  }
  .licc-goods-info-comment-content-buttom-svg:hover{
    color: #F56C6C;
  }
  .licc-goods-info-comment-content-buttom-svg-red{
    color: #F56C6C;
  }

  .licc-goods-goods-info-parameter-list{
    padding: 0px 15px;
    text-align: left;
    font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #666;
  }
</style>
